<template>
	<view class="container">
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation
			:scroll-into-view="scrollInto">
			<view class="pagecontrol-top-title">
				<view v-for="(item,index) in itemsArr" :key="index" class="pagecontrol-top-text"
					@click="changeTab(index)" :id="'tab' + index">
					<view :class="tabIndex === index?'pagecontrol-top-selected':'pagecontrol-top-normal'">
						{{item}}
					</view>
					<view class="pagecontrol-bottom-line"
						:class="tabIndex === index?'pagecontrol-bottom-line-show':'pagecontrol-bottom-line-visibility'">
					</view>
				</view>
			</view>
		</scroll-view>

		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in itemsArr" :key="index">
				<scroll-view scroll-y="true" show :style="'height:100%'" style="background-color: #F5F5F5;" @scrolltolower="onReachScollBottom">
					<template>
						<view style="height: 20rpx;"></view>
					</template>
					<template v-if="(dataList&&dataList.length>0)">
						<view v-if="tabIndex==0">
							<block  v-for="(itemm,indexm) in dataList" :key="indexm">
								<invite-card 
									:nickName="itemm.invitedUser.nickName"
									:avatarUrl="itemm.invitedUser.avatarUrl"
									:userTimes="itemm.userTimes"
									:awardMoney="itemm.awardMoney"
									:createTime="itemm.createTime">
								</invite-card>
							</block>
						</view>
						<view v-if="tabIndex==1">
							<block v-for="(itemm,indexm) in dataList" :key="indexm">
								<withdraw-card
									:withdrawId="itemm.withdrawId"
									:withdrawName="itemm.withdrawName"
									:withdrawRemark="itemm.withdrawRemark"
									:withdrawMoney="itemm.withdrawMoney"
									:status="itemm.status"
									:createTime="itemm.createTime">
								</withdraw-card>
							</block>
						</view>
						<view v-if="tabIndex==2">
							<block v-for="(itemm,indexm) in dataList" :key="indexm">
								<recharge-card
								:orderId="itemm.orderId"
								:description="itemm.description"
								:tradeMoney="itemm.tradeMoney"
								:productTimes="itemm.productTimes"
								:tradeTime="itemm.tradeTime"
								:tradeStatus="itemm.tradeStatus"></recharge-card>
							</block>	
						</view>
						<view style="height: 200rpx"></view>
					</template>
					<!-- 无数据 -->
					<template v-else>
						<image class="queshengiamge" src="../../static/images/other/quesheng.png" mode="widthFix"></image>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="bannerad">
			<ad unit-id="adunit-accaf5586fc23e06" ad-intervals="30"></ad>
		</view>

		<levitated-sphere :image="'../../static/images/other/erweima.png'" @bindShare="bindShare()"></levitated-sphere>
		<qrcode-poster ref="poster" :title="'微信扫一扫，邀好友，得红包'" :content="content"></qrcode-poster>
	</view>
</template>

<script>
	
	import {http} from '../../utils/http.js'
	import { mapState } from 'vuex'
	export default {

		data() {
			return {
				itemsArr: ['已邀好友',  '提现记录','充值记录'],
				tabIndex: 0,
				scrollInto: '',
				scrollH: 660,
				dataList:[],
				currentPage:1,
				size:10,
				total:0,
				dataUrl:['/invite/record/list','/withdraw/order/list','/recharge/order/list'],
				isTotal:false,
			}
		},
		computed:{
			...mapState('m_user',['userInfo','token'])
		},
		methods: {
			// 获取数据
			async flashDataList(){
				let that=this
				let res= await http({
					url:that.dataUrl[that.tabIndex]+"?currentPage="+that.currentPage+"&size="+that.size,
					method:"GET",
					header:{
						Authorization:that.token.data
					}
				})
				if(res.code&&res.code==200){
					if(that.dataList&&that.dataList.length>0){
						that.dataList=that.dataList.concat(res.data.data)
					}else{
						that.dataList=res.data.data	
					}
					if(res.data.total>res.data.currentPage*res.data.size){
						that.isTotal=false
					}else{
						that.isTotal=true
					}
					that.currentPage=res.data.currentPage
					that.size=res.data.size
					that.total=res.data.total
				}else{
					uni.showToast({
						duration:2000,
						title:'请求数据失败',
						icon:"none"
					})
				}
			},
			// 监听滑动
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			// 切换选项
			changeTab(index) {
				
				if (this.tabIndex === index) {
					return;
				}
				this.currentPage=1
				this.total=0,
				this.isTotal=false
				this.tabIndex = index
				this.dataList=[]
				// 滚动到指定元素
				this.scrollInto = 'tab' + index
				// 获取当前分类下的列表数据
				this.flashDataList()
			},
			// 分享
			async bindShare(){
				let that=this
				// 去分享
				let shareImageUrl=uni.getStorageSync("shareImageUrl")
				// console.log(shareImageUrl)
				if(shareImageUrl==''||shareImageUrl==undefined||shareImageUrl==null){
					// 获取分享图片地址
					let res= await http({
						url:'/QRcode/unlimitedQRCode',
						method:'GET',
						header:{
							Authorization:that.token.data
						}
					})
					// console.log(res)
					if(res.code&&res.code==200){
						shareImageUrl=res.data
						//保存图片地址到缓存
						uni.setStorageSync('shareImageUrl',shareImageUrl)
					}else{
						uni.showToast({
							duration:2000,
							title:'请求数据失败',
							icon:"none"
						})
					}
				}
				if(!(shareImageUrl==''||shareImageUrl==undefined||shareImageUrl==null)){
					// 弹出对应框给用户
					this.$refs.poster.showCanvas(shareImageUrl)
				}
			},
			// 滚动条触底刷新
			onReachScollBottom(){
				if(!this.isTotal){
					this.currentPage=this.currentPage+1
					this.flashDataList()
				}else{
					uni.showToast({
						duration:2000,
						title:'已经是全部数据啦',
						icon:"none"
					})
				}
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					// console.log("wuwuFQ:", res)
					this.scrollH = res.windowHeight
					this.scrollH -= 44
				}
			})
			this.flashDataList()
		}
	}
</script>

<style lang="scss" scoped>
	.bannerad{
		width: 100%;
		position: absolute;
		
		bottom: 0;
		/deep/ ad{
			transform: scale(0.8) !important;
		}
	}
	.queshengiamge{
		width: 100%;
	}
	.container{
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	.pagecontrol-top-scroll {
		height: 40px;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		border-bottom-width: 1rpx;
		border-bottom-style: solid;
		border-bottom-color: #EDEDED;
	}

	.pagecontrol-top-title {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
	}


	.pagecontrol-top-text {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.pagecontrol-top-normal {
		color: black;
		font-size: 16px;
	}

	.pagecontrol-top-selected {
		color: #0abafa;
		font-size: 17px;
	}

	.pagecontrol-bottom-line {
		width: 100%;
		height: 1px;
		margin-top: 2px;
		background-color: #0abafa;
	}

	.pagecontrol-bottom-line-show {
		visibility: visible;
	}

	.pagecontrol-bottom-line-visibility {
		visibility: hidden;
	}

	.order-item {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 15rpx;
	}

	.order-top-view {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.order-store-name {
		font-size: 16px;
		font-weight: 500;
	}

	.order-status {
		font-size: 12px;
		color: #A5A5A5;
	}

	.order-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-date {
		margin: 6rpx 0;
	}

	.bottom-buttons {
		margin-top: 10rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.button-tag {
		margin-left: 40rpx;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		border-radius: 15px;
		color: #A5A5A5;
		border: 1px solid #EDEDED;
	}
</style>
